<template>
    <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane class="eltab" label="管理咨询" name="first">
                <div class="table" style="width: 100%;height: 100%;">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="date" label="序号" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="录入日期" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="新闻类型">
                        </el-table-column>
                        <el-table-column prop="address" label="置顶">
                        </el-table-column>
                        <el-table-column prop="address" label="浏览次数">
                        </el-table-column>
                        <el-table-column prop="address" label="标题">
                        </el-table-column>
                        <el-table-column prop="address" label="操作">
                            <el-row>
                                <el-button>置顶</el-button>
                                <el-button type="success">编辑</el-button>
                                <el-button type="danger">删除</el-button>
                            </el-row>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="prev, pager, next" :total="70">
                    </el-pagination>
                </div>

            </el-tab-pane>
            <el-tab-pane label="新增咨询" name="second" style="border:none">
                <div class="second-box">
                    <div class="secbox-tob">
                        <div class="tob-box1">
                            <h3>编辑标题</h3>
                            <el-input v-model="input" style="width: 445px;height: 60px;"
                                placeholder="请输入新闻标题"></el-input>
                        </div>
                        <div class="tob-box1">
                            <div class="xinwenleixing">
                                新闻类型
                            </div>
                            <el-radio v-model="radio" label="1">公司新闻</el-radio>
                            <el-radio v-model="radio" label="2">行业新闻</el-radio>
                        </div>
                        <div class="tob-box1">
                            <div class="xinwenleixing">
                                置顶
                            </div>
                            <el-row>
                                <el-button type="primary">是</el-button>
                                <el-button>否</el-button>
                            </el-row>
                        </div>
                        <div class="tob-box1">
                            <div class="xinwenleixing">
                                上传封面
                            </div>
                            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div class="tob-box2">
                            <div style="display: flex; margin-bottom: 20px;">
                                <div style="margin-right: 10px;width: 52px; font-size: 12px;">发布日期</div>
                                <el-input v-model="input" style="width: 70px;height: 24px;"></el-input>
                            </div>
                            <div style="display: flex; margin-bottom: 20px;">
                                <div style="margin-right: 10px;width: 52px; font-size: 12px;">来源</div>
                                <el-input v-model="input" style="width: 70px;height: 24px;"></el-input>
                            </div>
                            <div style="display: flex; margin-bottom: 20px;">
                                <div style="margin-right: 10px;width: 52px; font-size: 12px;">作者</div>
                                <el-input v-model="input" style="width: 70px;height: 24px;"></el-input>
                            </div>
                        </div>
                    </div>
                    <div style="width: 96%;height: 780px;border-bottom: 2px solid #eee;padding: 0 2%;">
                        <h3>编辑内容</h3>
                        <div>
                            <el-input class="bj-inp" v-model="input" placeholder="请输入新闻内容"
                                style="width: 100%;height: 220px;"></el-input>

                        </div>
                        <el-row style="margin: 20px 500px;">
                            <el-button style="width: 120px;height: 40px;">预览</el-button>
                            <el-button type="primary" style="width: 120px;height: 40px;">提交</el-button>
                        </el-row>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            radio: '1',
            input: '',
            imageUrl: '',
            activeName: 'first',
            tableData: [{
                date: '1',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '3',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '4',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
};
</script>
<style lang="scss" scoped>
:deep .el-tabs--card>.el-tabs__header .el-tabs__item {
    width: 141px;
    height: 40px;
    text-align: center;
    margin-right: 20px;
    border: none;
}

:deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
}

:deep .el-pagination {
    text-align: right;
}

:deep .el-button {
    width: 55px;
    height: 25px;
    // text-align: center;
    padding: 0;
}

:deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
    height: 100px;
}

:deep .bj-inp input {
    height: 220px;
}

.secbox-tob {
    width: 96%;
    height: 150px;
    // background: red;
    border-bottom: 2px solid #eee;
    display: flex;
    padding: 0 2%;
    justify-content: space-between;
}

.tob-box1 {
    // margin-right: 150px;
}

// 上传封面样式
.avatar-uploader .el-upload {
    border: 1px dashed #333;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 128px;
    line-height: 128px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}


.secbox-bot {
    width: 96%;
    height: 780px;
    // background: red;
    border-bottom: 2px solid #eee;
    display: flex;
    padding: 0 2%;
    justify-content: space-between;
}
</style>